<template>
    <view class="taskNum-Box">
        <!-- app提醒任务 -->
        <!-- <view class="task-num-app">
            <view class="app-task-left">
                <view class="left-top">0</view>
                <view class="left-bottom">APP提醒任务</view>
            </view>
            <view class="task-line"></view>
            <view class="app-task-right">
                <view class="right-top">0</view>
                <view class="right-bottom">已执行导出</view>
            </view>
        </view> -->

        <!-- 今日未完成 -->
        <view class="daily-task-num">
            <!-- 今日未完成 -->
            <view class="daily-top">
                <view class="top-text">
                    <view class="top-text-num">{{ regularTaskNum + customImportNum || 0 }}</view>
                    <view class="top-noComplete">今日未完成</view>
                </view>
            </view>
            <!-- 未完成任务数 -->
            <view class="daily-bottom">
                <!-- 常规招揽 -->
                <view class="dailt-item" @tap="goHandleTask('常规招揽')">
                    <view class="item-top">{{ regularTaskNum || 0 }}</view>
                    <view class="item-bottom">常规招揽</view>
                </view>
                <view class="task-line"></view>

                <!-- 预约促进 -->
                <!-- <view class="dailt-item" @tap="goHandleTask('预约促进')">
                    <view class="item-top">0</view>
                    <view class="item-bottom">预约促进</view>
                </view>
                <view class="task-line"></view> -->

                <!-- 活动促进 -->
                <!-- <view class="dailt-item" @tap="goHandleTask('活动促进')">
                    <view class="item-top">0</view>
                    <view class="item-bottom">活动促进</view>
                </view>
                <view class="task-line"></view> -->

                <!-- 自定义任务 -->
                <view class="dailt-item" @tap="goHandleTask('自定义任务')">
                    <view class="item-top">{{ customImportNum || 0 }}</view>
                    <view class="item-bottom">自定义任务</view>
                </view>
            </view>
        </view>

        <!-- 今日已完成 -->
        <view class="complete-task-num">
            <!-- 今日已完成 -->
            <view class="complete-task-item">
                <view class="item-top">{{todayCompletedStastics.completed}}</view>
                <view class="item-bottom">今日已完成</view>
            </view>
            <view class="task-line"></view>

            <!-- 成功 -->
            <view class="complete-task-item" @tap="handleStoreSee('Success')">
                <view class="item-top">{{todayCompletedStastics.finish}}</view>
                <view class="item-bottom">成功</view>
            </view>
            <view class="task-line"></view>
            <!-- 继续 -->
            <view class="complete-task-item" @tap="handleStoreSee('Resume')">
                <view class="item-top">{{todayCompletedStastics.continue}}</view>
                <view class="item-bottom">继续</view>
            </view>
            <view class="task-line"></view>
            <!-- 战败 -->
            <view class="complete-task-item" @tap="handleStoreSee('Defeated')">
                <view class="item-top">{{todayCompletedStastics.giveUp}}</view>
                <view class="item-bottom">战败</view>
            </view>
        </view>

        <!-- 客户清单(成功、继续、战败) 区域 -->
        <uni-popup ref="popup">
            <view class="popup-box">
                <view class="popup-top">
                    <view class="popup-title">
                        <text class="title">【{{ task_store }}】客户清单</text>
                        <van-icon @click="handleInventoryClose" name="cross" style="margin-right: 8px; color: #575b66" />
                    </view>
                </view>
                <!-- 内容-成功 -->
                <view class="popup-content">
                    <view class="content-items" v-for="(item, index) in taskStateTableData" :key="item.id">
                        <view class="content-text">
                            <text class="items-left">序号</text>
                            <text class="items-right">{{index + 1}}</text>
                        </view>
						<view class="content-text">
						    <text class="items-left">任务状态</text>
						    <text class="items-right">{{item.source}}</text>
						</view>
						<view class="content-text">
						    <text class="items-left">客户姓名</text>
						    <text class="items-right">{{item.name}}</text>
						</view>
						<view class="content-text">
						    <text class="items-left">车牌号</text>
						    <text class="items-right">{{item.lsn}}</text>
						</view>
						<view class="content-text">
						    <text class="items-left">客户电话</text>
						    <text class="items-right">{{item.tel}}</text>
						</view>
						<view class="content-text">
						    <text class="items-left">车架号</text>
						    <text class="items-right">{{item.vin}}</text>
						</view>
						
						<view class="content-text">
						    <text class="items-left">任务类型</text>
						    <text class="items-right">{{item.type}}</text>
						</view>
						<view class="content-text">
						    <text class="items-left">任务名称</text>
						    <text class="items-right">{{item.subjectName}}</text>
						</view>
						<view class="content-text">
						    <text class="items-left">维系节点</text>
						    <text class="items-right">{{item.subject}}</text>
						</view>
						<view class="content-text">
						    <text class="items-left">维系结果</text>
						    <text class="items-right">{{item.result}}</text>
						</view>
						<view class="content-text">
						    <text class="items-left">维系时间</text>
						    <text class="items-right">{{item.finishTime}}</text>
						</view>
						<view class="content-text">
						    <text class="items-left">维系人</text>
						    <text class="items-right">{{item.personLiable}}</text>
						</view>
						<view class="content-text">
						    <text class="items-left">预约时间</text>
						    <text class="items-right">{{item.appointmentTime}}</text>
						</view>
						<view class="content-text">
						    <text class="items-left">继续联系时间</text>
						    <text class="items-right">{{item.nextKeepTime}}</text>
						</view>
						<view class="content-text">
						    <text class="items-left">备注</text>
						    <text class="items-right">{{item.remark}}</text>
						</view>
						
                    </view>
                </view>
			</view>
        </uni-popup>
    </view>
</template>

<script>
import utils from '@/utils/uitils.js'
import apiRqs from '@/api/api-request.js'
export default {
    data() {
        return {
            task_store: '成功',
			
			shopId: '',

            appTaskNum: 0, // APP提醒任务数
            appeExecutedNum: 0, // 已执行导出数
            regularTaskNum: 0, // 常规招揽任务数
            appointmentTaskNum: 0, // 预约促进任务数
            activityNum: 0, // 活动促进任务数
            customImportNum: 0 ,// 自定义导入任务数
			
			todayCompletedStastics: {
				completed: "-",
				unfinished: "-",
				finish: "-",
				giveUp: "-",
				continue: "-",
				wxTaskNum: "-",
				appointTaskNum: "-",
				unfinishedHistoryCount: "-",
				unfinishedTel: "-",
			},
			
			taskStateTableData: [], // 成功、继续、战败任务清单
			
			successList: [], // 成功清单 
			continueList: [], // 继续清单
			giveUpList: [], // 战败清单
        }
    },
	
	created () {
		const tokenInfo = uni.getStorageSync('tokenInfo')
		this.shopId = tokenInfo.shopId
	},

    mounted() {
        this.getRegularTaskNum() // 获取常规招揽任务数
        this.getCustomImport() // 获取自定义导入任务数
		this.getTodayTaskStatics() // 获取今日任务概览
		this.getTaskStateList() // 获取当日成功、继续、战败任务清单
    },

    methods: {
		
		// 提供给外部刷新
		refresh(){
			this.getRegularTaskNum() // 获取常规招揽任务数
			this.getCustomImport() // 获取自定义导入任务数
			this.getTodayTaskStatics() // 获取今日任务概览
			this.getTaskStateList() // 获取当日成功、继续、战败任务清单
		},
		
        // 跳转页面
        goHandleTask(pathSkip) {
            let pages = getCurrentPages()
            let currentPagePath = pages[pages.length - 1].$page.fullPath
            console.log('当前页面的路由：', currentPagePath)

            if (pathSkip === '常规招揽') {
                let path = '/packageE/maintenance-task/db-maintenance-task'
                if (currentPagePath === path) {
                    return
                } else {
                    uni.navigateTo({
                        url: path
                    })
                }
            } else if (pathSkip === '预约促进') {
                console.log('预约促进')
            } else if (pathSkip === '活动促进') {
                console.log('活动促进')
            } else if (pathSkip === '自定义任务') {
                let path = '/packageE/maintenance-task/customImport'
                if (currentPagePath === path) {
                    return
                } else {
                    uni.navigateTo({
                        url: path
                    })
                }
            }
        },

        /**
         * @function 查看任务状态完成度(成功、继续、战败)
         * @param {string} storeType Success-成功、Resume-继续、Defeated-战败
         */
        handleStoreSee(storeType) {
            this.$refs.popup.open('center')
			
			this.taskStateTableData = []
			
            if (storeType === 'Success') {
                this.task_store = '成功'
				
				this.taskStateTableData = this.successList
            } else if (storeType === 'Resume') {
                this.task_store = '继续'
				
				this.taskStateTableData = this.continueList
            } else if (storeType === 'Defeated') {
                this.task_store = '战败'
				
				this.taskStateTableData = this.giveUpList
            }
        },
        /** @function 关闭客户清单弹窗 */
        handleInventoryClose() {
            this.$refs.popup.close()
			
			this.taskStateTableData = []
        },

        // 获取常规招揽任务数
        async getRegularTaskNum() {
            try {
                let reqData = {
                    dateRange: {
                        beginDate: utils.getDay(),
                        endDate: utils.getDay()
                    },
                    paged: { pageSize: 5, pageIndex: 1, orderBy: '' },
                    personLiable: '',
                    finish: 0,
                    vin: '',
                    node: [-13, -7],
                    way: '电话',
                    type: '',
                    selectType: '',
                    subjectName: '',
                    CustomType: ''
                }

                const res = await apiRqs.getDingbaoWorkList(reqData)
                this.regularTaskNum = res.data.totalRecords

                console.log('获取常规招揽任务数顶部任务数显示', this.regularTaskNum)
            } catch (e) {
                console.error('获取常规招揽任务数失败', e)
            }
        },

        // 获取自定义导入任务数
        async getCustomImport() {
            try {
                let reqData = {
                    dateRange: {
                        beginDate: utils.getDay(),
                        endDate: utils.getDay()
                    },
                    paged: { pageSize: 10, pageIndex: 1, orderBy: '' },
                    personLiable: '',
                    finish: 0,
                    vin: '',
                    node: [-13, -7],
                    way: '电话',
                    type: '',
                    selectType: '',
                    subjectName: '',
                    CustomType: '自定义'
                }

                const res = await apiRqs.getDingbaoWorkList(reqData)
                this.customImportNum = res.data.totalRecords
                console.log('获取自定义导入任务数', this.customImportNum)
            } catch (e) {
                console.error('获取自定义导入任务数失败', e)
            }
        },

        // 今日已完成任务概览
        async getTodayTaskStatics() {
            try {
                let todayReqData = {
                    shopId: this.shopId,
                    dateRange: {
                        beginDate: utils.getDay(),
                        endDate: utils.getDay()
                    },
                    nodeType: '',
                    userName: []
                }
				
				const res = await apiRqs.getTodayTaskStatics(todayReqData)
				console.log("今日已完成任务概览---------------", res.data);
				
				let data = JSON.parse(JSON.stringify(res.data));
				this.todayCompletedStastics = data;
				this.todayCompletedStastics.completed = data.finish + data.continue + data.giveUp;
				
				
            } catch (e) {
                console.error('今日已完成任务概览获取失败', e)
            }
        },
    
		// 获取招揽成功、继续、战败任务清单 
		async getTaskStateList() {
			try{
				this.taskStateTableData = [];
				
				let reqData = {
					dateRange: {
					  beginDate: utils.getDay(),
					  endDate: utils.getDay(),
					},
					paged: {
					  pageSize: 999,
					  pageIndex: 1,
					  orderBy: "",
					},
					personLiable: '',
					finish: 1,
					vin: "",
					node: [-13, -7, -1, 0],
					way: "电话",
					type: "",
				};
				
				const res = await apiRqs.getDingbaoWorkList(reqData)
				let customList = JSON.parse(JSON.stringify(res.data.data));
				console.log("成功、继续、战败任务清单", customList);
				
				// 将为null的转变为""
				customList.forEach(item => {
				    for (let key in item) {
				        if (item[key] === null) {
				            item[key] = " ";
				        }
				    }
				});
				
				this.successList = customList.filter(item => {
					return item.result.split('-')[0] === '成功';
				})
				this.continueList = customList.filter(item => {
					return item.result.split('-')[0] === '继续';
				})
				this.giveUpList = customList.filter(item => {
					return item.result.split('-')[0] === '战败';
				})
				
				console.log('任务清单1', this.successList)
				console.log('任务清单2', this.continueList)
				console.log('任务清单3', this.giveUpList)
				
			}catch(e){
				console.log('获取招揽成功、继续、战败任务清单失败', e)
			}
		},
	
	}
}
</script>

<style lang="less" scoped>
.taskNum-Box {
    /* app提醒任务 */
    .task-num-app {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        border-radius: 12px;
        background-image: url('../../static/newImage/app.png');
        background-size: cover; /* 图片铺满整个背景 */
        background-position: center; /* 图片居中显示 */
        background-repeat: no-repeat; /* 不重复平铺背景图 */

        .app-task-left,
        .app-task-right {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            font-size: 12px;
            color: #fff;
            .left-top,
            .right-top {
                margin-bottom: 5px;
                font-size: 20px;
                font-weight: 700;
            }
        }
    }

    /* 今日未完成 */
    .daily-task-num {
        display: flex;
        flex-direction: column;
        // align-items: center;
        margin-top: 12px;
        padding: 16px;
        border-radius: 12px;

        background-image: url('../../static/newImage/no-complete.png');
        background-size: cover; /* 图片铺满整个背景 */
        background-position: center; /* 图片居中显示 */
        background-repeat: no-repeat; /* 不重复平铺背景图 */

        color: #fff;
        font-size: 12px;

        .daily-top {
            .top-text {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                flex: 1;

                .top-text-num {
                    margin-bottom: 5px;
                    font-size: 20px;
                    font-weight: 700;
                }
            }
        }
        // 未完成任务数
        .daily-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 12px;

            .dailt-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                flex: 1;

                .item-top {
                    margin-bottom: 5px;
                    font-size: 20px;
                    color: #fff;
                }
            }
        }
    }

    /* 今日已完成 */
    .complete-task-num {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
        padding: 16px;
        border-radius: 12px;
        background-image: url('../../static/newImage/complete.png');
        background-size: cover; /* 图片铺满整个背景 */
        background-position: center; /* 图片居中显示 */
        background-repeat: no-repeat; /* 不重复平铺背景图 */
        font-size: 12px;
        color: #fff;

        .complete-task-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;

            .item-top {
                margin-bottom: 5px;
                font-size: 20px;
                font-weight: 700;
            }
        }
    }

    /* 竖线 */
    .task-line {
        width: 1px;
        height: 16px;
        background-color: #fff;
    }

    /* 弹窗区域 */
    .popup-box {
        padding: 12px;
        border-radius: 8px;
        width: 300px;
        height: 350px;
        overflow: hidden; /* 超出部分隐藏 */
        overflow-y: auto; /* 添加垂直滚动条 */
        background-color: #fff;

        .popup-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            font-weight: 400;
            color: #333333;
        }

        .popup-content {
            margin-top: 12px;
            overflow-y: auto; /* 添加垂直滚动条 */

            .content-items {
                margin-bottom: 12px;
                padding: 12px;
                border-radius: 8px;
                background-color: #f7f8fb;
                &:last-child {
                    margin-bottom: 0;
                }

                .content-text {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 5px;
                    font-size: 12px;
                    color: #999999;
                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
}
</style>
